<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/moreList.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <div class="nav">
        <img src="image/2.png" alt="头像">
        <span class="title1">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="person.html">我的</a>
        <a href="edit.html">创作</a>
        <a href="logout">注销</a>
    </div>
    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="image/头像.jpg">
                <span class="name"></span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span class='total'></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right"> 
            <div class="article">
                <h2 class="title"></h2>
                <span class="date"></span>
                <div id="make">
                    <a class='deleteA'></a>
                    <a class='updateA'></a>
                </div>
                <div class="desc" id="content" style="background-color: transparent;"></div>
            </div> 
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>

        $.ajax({
            method: 'GET',
            url: 'details' + location.search,
            success: function(data,status){
                buildBlog(data);
            },
            error: function(data,status){
                location.assign("login.html");
            }
        });

        function buildBlog(blog){
            // 1. 更新 title
            let titleDiv = document.querySelector('.title');
            titleDiv.innerHTML = blog.title;
            // 2. 更新 postTime
            let postTime = document.querySelector('.date');
            postTime.innerHTML = DateFormat(blog.postTime);
            //
            if(blog.isAuthor){
                let deleteA = document.querySelector('#make>.deleteA');
                deleteA.innerHTML = '删除文章';
                deleteA.href= 'delete?blogId=' + blog.blogId;
                let updateA = document.querySelector('#make>.updateA');
                updateA.innerHTML = '编辑文章';
                updateA.href= 'update.html?blogId=' + blog.blogId;
            }
            // 3 更新 content
            editormd.markdownToHTML('content', {markdown: blog.content});
        }
        
        // 把毫秒级时间戳转化成格式化日期
        function DateFormat(timeStampMS) {
            var date = new Date(timeStampMS);
 
            var year = date.getFullYear(),
                month = date.getMonth()+1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                        (month < 10? '0' + month : month) + '-' +
                        (day < 10? '0' + day : day) + ' ' +
                        (hour < 10? '0' + hour : hour) + ':' +
                        (min < 10? '0' + min : min) + ':' +
                        (sec < 10? '0' + sec : sec);
        
            return newTime;
        }

        $.ajax({
            url: 'user'+location.search,
            method: 'get',
            success: function(data,status){
                changeUser(data);
            }
        });

        function changeUser(user) {
            let name = document.querySelector('.left>.card>.name');
            name.innerHTML = user.username;
        }

        $.ajax({
            url: 'num'+location.search,
            method: 'get',
            success: function(data,status){
                changeNum(data);
            }
        });

        function changeNum(total){
            let num = document.querySelector('.total');
            num.innerHTML = total;
            console.log(total);
        }
    </script>
</body>
</html>